//家谱秀
.jpx-box{
  @extend .bg_white;

  padding: 0 10px;
  margin-bottom: 10px;
  .jpx-title{
    padding: 10px 0 5px 0;
    font-size: 16px;

    .pull-left{
      color: $font_color;
    }
    .pull-right{
      a{
        display: inline-block;
        padding: 2px 0 0 1em;
      }
      i.icon{
        font-size: 20px;
      }
    }
  }
}
.jpx-lists{
  .jpx-list{
    @extend .clearfix;

    margin-left: -15px;
    .jpx-item{
      width: calc(33.3333% - 16px);
      margin-left: 15px;
      margin-bottom: 10px;
      float: left;

      .jpx-name,.jpx-author{
        @extend .text_oneline;
      }
      .jpx-like{
        font-size: 12px;
        margin-top: 3px;
      }
      .jpx-like-fill{
        @extend .jpx-like;

        color: $theme_color;
      }
    }

    .jpx-cover{
      position: relative;

      &:before{
        content: '';
        position: absolute;
        width: 4px;
        height: calc(100% - 2px);
        background: #ffffff;
        border: 1px solid $border_color;
        right: -5px;
        top: 2px;
        transform: skewY(35deg);
        z-index: 2;
      }
      &:after{
        content: '';
        position: absolute;
        width: calc(100% - 1px);
        height: 4px;
        background: #ffffff;
        border: 1px solid $border_color;
        bottom: -5px;
        left: 2px;
        transform: skewX(35deg);
        z-index: 2;
      }
      img{
        position: relative;
        z-index: 9;
        border-radius: 2px;
      }
      .jpx-hot{
        padding: 0 5px;
        background: $theme_color;
        color: #ffffff;
        position: absolute;
        top: 5px;
        left: 0;
        z-index: 10;
      }
    }
  }
}
.jpx-footer-nav{
  border-top: 0.5px solid $border_color;

  a.weui-grid{
    border-right: 0.5px solid $border_color;
    &:last-child{
      border-right: none;
    }
  }
}